<template>
    <div v-if="htmlWidth<670">
        <div class="pageBg111" v-if="numShow">
            <div class='pageBgT' v-if="num == 1"> 
                <span>
                  点击“我的任务”各状态栏可查看您发起的所有任务的信息、状态及报告。
                  <button class="btn1" @click="guideBottom()">下一步({{num}}/3)</button>
               </span>
               <img src="../../assets/img/workt/bz1(1).png" alt="">
            </div>
            <div class='pageBgC' v-else-if="num == 2">
              <span>
                首次邀请客户请点击“新客户邀请”按钮。
               <button class="btn2" @click="guideBottom()">下一步({{num}}/3)</button>
              </span>
              <img src="../../assets/img/workt/bz2(1).png" alt="">
            </div>
            <div class='pageBgD' v-else-if="num == 3">
              <span>
                您在此处可以查看使用中的常见问题，点击下方问题名称，可直接进入问题详情。
                <button class="btn3" @click="guideBottom()">我知道了({{num}}/3)</button>
              </span>
              <img src="../../assets/img/workt/bz3(1).png" alt="">
            </div>
            <!-- <div class="pageBgk"  @click="guideBottom()">
                <div v-if="num !=3 ">下一步({{num}}/3)</div>
                <div v-else>我知道了({{num}}/3)</div>
            </div> -->
        </div>
        <div class="pageBg1z"></div>
        <div class="pagec">
            <!-- headIcon -->
            <div class="headBg">
                <van-image :src="headBg" />
            </div>
            <!-- 导航栏 -->
            <div class="navBar">
                <div class="tops"  v-if="route.query.isShow">工作台</div>
                <customNavBar class="customNavBar" v-else :titleTest=titleTest></customNavBar>
            </div>
            <!-- 页面内容 -->
            <div class="content">
                <!-- 用户信息 -->
                <div class="userInfo">
                    <div class='userInfoTop'>
                        <img :src="headIcon" alt="">
                        <!-- <van-image width="54" height="54" :src="headIcon" /> -->
                        <div class="userName">
                            <div>{{userInfoObject.userInfo.nickName || '名字'}}</div>
                            <div>{{userInfoObject.userInfo.deptName || '公司'}}</div>
                        </div>
                    </div>
                    <div class='userInfoBottom' @click="gude()" v-log-button-name="'保单检视_工作台_使用指引'">
                        使用指引 >
                    </div>
                </div>
                <!-- 任务统计 -->
                <div class="taskStatistics">
                    <div class="taskText">我的任务</div>
                    <van-row gutter="20"> 
                        <van-col span="8" @click="gotas(1)" >
                            <div class="completed" v-log-button-name="'保单检视_工作台_已完成'">
                                <div>
                                    <img src="../../assets/img/features/completed.png" alt="">
                                </div>
                                <div class="completedText" >已完成 ></div>
                                <div style="font-size: 26px;font-weight: 500;color: #198AFA;line-height: 24px;">
                                    {{userInfoObject.taskInfo.finishTaskCount || '0'}}
                                </div>
                            </div>
                        </van-col>
                        <van-col span="8" @click="gotas(2)" >
                            <div class="completed" v-log-button-name="'保单检视_工作台_进行中'">
                                <div>
                                    <img src="../../assets/img/features/inProgress.png" alt="">
                                </div>
                                <div class="completedText">进行中 ></div>
                                <div style="font-size: 26px; font-weight: 500; color: #FA8A0C; line-height: 24px;">
                                    {{userInfoObject.taskInfo.doingTaskCount || '0'}}
                                </div>
                            </div>
                        </van-col>
                        <van-col span="8" @click="gotas(3)" >
                            <div class="completed" v-log-button-name="'保单检视_工作台_失败'">
                                <div>
                                    <img src="../../assets/img/features/failure.png" alt="">
                                </div>
                                <div class="completedText">失败 ></div>
                                <div style="font-size: 26px; font-weight: 500; color: #FA4B4B; line-height: 24px;">
                                    {{userInfoObject.taskInfo.failTaskCount || '0'}}
                                </div>
                            </div>
                        </van-col>
                    </van-row>
                </div>
                <!-- 邀请新用户--->
                <div class='newUser' @click="yquse()" v-log-button-name="'保单检视_工作台_新客邀请'">新客户邀请</div>
                <!-- 全部客户 -->
                <div class="customerList">
                    <div class="allCustomersText">全部客户</div>
                    <form action="/" style="display:flex; width:100%">
                    <van-search class="search"  v-model="customName" show-action placeholder="请输入客户姓名"
                        @search="onSearch" @cancel="onCancel" />
                        <div class="searchDiv" @click="onSearch"> 搜索</div>
                    </form>
                    <div class='customerc'>
                        <van-list class="vanList" v-model:loading="loading" :finished="finished" finished-text="没有更多了">
                            <van-cell v-for="v in userInfoObject.customInfo" :key="v">
                                <div class="cellView"  @click="customers(v)" >
                                    <!-- 两端对齐 -->
                                    <van-row justify="space-between">
                                        <van-col span="1">
                                            <div class="verticalBar">
                                                <img src="../../assets/img/workt/tx.png" alt="">
                                            </div>
                                        </van-col>
                                        <van-col span="19">
                                            <div class="customerName"  :title="v.customName">{{ v.customName }}</div>
                                        </van-col>
                                        <!-- <van-col span="10">
                                            <div class="inviteAgain" @click.stop="inviteAgainClick(v)">再次邀请</div>
                                        </van-col> -->
                                        <van-col span="2">
                                            <div class="rightArrow">
                                                <van-image width="12" height="12"
                                                    :src="rightArrow" />
                                            </div>
                                        </van-col>
                                        <van-col span="1"></van-col>
                                    </van-row>
                                </div>
                            </van-cell>
                        </van-list>
                    </div>
                </div>
                <!-- 常见问题 -->
                <div class="customerProject">
                    <div class="projectTop">常见问题</div>
                    <div class="project"  v-for="(v,b) in porjectList" :key="b">
                        <div class="projectList" @click="projectRoyte(v)" v-log-button-name="'保单检视_工作台_常见问题'">
                            <div class="projectListDv">
                                <img src="../../assets/img/wtt.png" alt="">
                                <div>{{v.problemName}}</div>
                            </div>
                            <img :class="v.isShow?'projectListMg':'projectListMg1'" src="../../assets/img/xll.png" alt="">
                        </div>
                        <div class="projectBtoom" v-if="v.isShow">{{v.problemDescribe}}</div>
                    </div>
                </div>
                <!-- 添加客户 -->
                <div class='primaryButton'>
                    <div class="primaryButtont">
                        <img src="../../assets/img/workt/znkf.png" alt="">
                        <div>
                         <span class="tels">客服电话</span> <br>
                          <span>{{phoneNumber || '400-1234-5678'}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <workTablePad v-else> </workTablePad>
</template>

<script lang="ts" setup name="addCustomers">
import { useRouter, useRoute } from "vue-router"
import { Toast } from '/@/utils/Message';
import { onMounted } from "vue"
import { reactive, ref } from 'vue'
import { sm2 } from 'sm-crypto';
import { IntData } from "../Task/ts/workTable"
import workTablePad from  "/src/views/task/workTablePad.vue"
import customNavBar from  "/src/components/NavBar/customNavBar.vue"
import { baseInfo, taskInfo, customInfo, updatePasswordStatus, getProblemIn} from "/@/api/auth/task"
import { getConfiguration } from "/@/api/auth/repot"
import headBg from  "../../assets/img/features/headBg.png"
import headIcon from  "../../assets/img/features/headIcon.png"
import rightArrow from  "../../assets/img/features/rightArrow.png"
import { JSONStringify } from "lib/tool";
import {
  Jlogin,
} from "/@/api/auth/simpleVersion.ts";

//公钥串---加密使用
const publicKey = ref<string>("044291b381a039a8d7d02d7272d2d7c78a30d33e3eeaa0b509bf77d2376582ab2d573730e6bfe9a53bad53f53ac1a85d9c11050931f04bc8b3afc04144d5a6f9be")
//私钥串---解密使用
const privateKey = ref<string>("5aa03412c3051e1d4cf9d19cfbeeec70c28f388c9f82747cc912096c9cd44bea")
// 加密方法
const JIAMIPublicData=(data:string)=> {
    const cipherMode = 1;
    const result = sm2.doEncrypt(data, publicKey.value,cipherMode);
    return `04${result}`;
}
const router = useRouter()
const route = useRoute()
const titleTest = ref<string>("工作台")
const phoneNumber = ref<string>("")
const list = ref([]);
const numShow = ref<boolean>(false)
const num = ref<number>(1)
const loading = ref<boolean>(false);
const finished = ref<boolean>(false);
const userInfoObject = reactive(new IntData())
const customName = ref<string>('');
const porjectList = ref([])
const projectRoyte = (v:any) => {
    v.isShow = !v.isShow
}
// 判断屏幕尺寸显示
const htmlWidth = ref(document.documentElement.clientWidth || document.body.clientWidth) 
const htmlHeight = ref(document.documentElement.clientHeight || document.body.clientHeight)

// 回车键
const onSearch = () => {
    // if(customName.value) customName.value = JIAMIPublicData(customName.value)
    // customName.value = '3fc162072bdf8eb3a5b62176f69f3807'
    getList()
}
// 右侧事件
const onCancel = ():void => {
  customName.value = ''
    getList()
}
// 用户列表
const getList = ():void => {
    let a = ''
    if(customName.value){
        a = JIAMIPublicData(customName.value)
    } else {
        a = ''
    }
    customInfo({customName:a}).then((res: any) => {
        finished.value = true;
        loading.value = false;
        if(res.code == 200) {
            userInfoObject.customInfo = res.data
        }
    })
}
onMounted(async()=>{
    // 机构进来
    if(route.query.deptUserId) {
        const c: any = await Jlogin(route.query)
        if (c.code == 200) {
            sessionStorage.setItem("token", c.token);
          } else {
            Toast(c.msg);
        }
    }
    // 新用户触发操作
    if((sessionStorage.getItem("intPasswordStatus") as any) == 2) {
        numShow.value = true
    } else {
        numShow.value = false
    }
    const a: any = await getConfiguration({name: 'phoneNumber'})
    if(a?.code == 200)  phoneNumber.value = a.data

    // 工作台
    baseInfo({}).then((res: any) => {
        if(res.code == 200) {
            userInfoObject.userInfo = res.data
        }
    })
    // 任务统计
    taskInfo({}).then((res: any) => {
        if(res.code == 200) {
            userInfoObject.taskInfo = res.data
        }
    })
    // 常见问题
    getProblemIn().then((res: any) => {
        if (res.code == 200) {
            porjectList.value = res.data
        }
    })
    // 用户列表
    getList()
})
const gotas = (v:any):void => {
    router.push({ path: '/task', query: { type: v, num: JSON.stringify(userInfoObject.taskInfo) }})
}
const customers = (v:any):void => {
    router.push({ path: '/userInformation', query: { customId: v.customId as string } })
}
const yquse = ():void => {
    router.push('addingCustomers')
}
// 使用指引
const gude = () => {
    numShow.value = true
}
// 弹框点击
const guideBottom = () => {
    num.value++
    if(num.value >3){
        updatePasswordStatus({}).then((res: any) => {
            if (res.code == 200) {
             sessionStorage.setItem("intPasswordStatus",'0')
            }
        })
        num.value = 1
        numShow.value = false
    }
}
// 再次邀请
const inviteAgainClick = (v:any) => {
    router.push({ path: '/addingCustomersz', query: { customId: v.customId as string } })
}

</script>

<!-- less嵌套设置 -->
<style lang="less" scoped>
:deep(.van-nav-bar){
  background-color: rgb(50, 149, 249);
}
.pageBg111 {
    top: 0;
    width: 100vw;
    height: 110%;
    z-index: 1111;
    overflow: hidden;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.59);
    div {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .pageBgT {
        margin-top: 20px;
        span {
            top: 367px;
            left: 30px;
            width: 253px;
            display: block;
            font-size: 13px;
            text-align: left;
            line-height: 25px;
            color: #FFFFFF;
            position: absolute;
            width: 330px;
            height: 130px;
            padding: 10px;
            background-color: rgba(104, 104, 104,0.5);
            border-radius: 10px;
        }
        img {
          margin-top: 150px;
            width: 355px;
            height: 160px;
        }
    }
    .pageBgC {
        margin-top: 215px;
        span {
            top: 453px;
            left: 25px;
            width: 253px;
            display: block;
            font-size: 13px;
            text-align: left;
            text-align: center;
            line-height: 40px;
            color: #FFFFFF;
            position: absolute;
            width: 330px;
            height: 120px;
            background-color: rgba(104, 104, 104,0.5);
            border-radius: 10px;
        }
        img {
          margin-top: 130px;
            width: 355px;
            height: 50px;
        }
    }
    .pageBgD {
        margin-top: 300px;
        span {
            top: 167px;
            left: 43px;
            width: 303px;
            height: 120px;
            display: block;
            font-size: 13px;
            text-align: left;
            padding: 10px;
            line-height: 23px;
            color: #FFFFFF;
            position: absolute;
            background-color: rgba(104, 104, 104,0.5);
            border-radius: 15px;
        }
        img {
            margin-top: 10px;
            width: 355px;
            height: 300px;
        }
    }
    .pageBgk {
        width: 100vw;
        bottom: 17px;
        position: fixed;
        overflow: hidden;
        justify-content: center;
        div {
            width: 127px;
            height: 38px;
            color: #FFFFFF;
            line-height: 38px;
            text-align: center;
            border-radius: 19px;
            border: 1px solid #FFFFFF;
        }
    }
}
.pageBg1z {
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    background: #F5F7FA;

}
.pagec {
    z-index: 444;
    width: 100vw;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: relative;
    .navBar {
        width: 100vw;
        height: 68px;
        position: absolute;
        top: 0px;
    }

    // 设置导航栏字体颜色
    :deep(.van-nav-bar__title) {
        color: white;
    }

    :deep(.van-icon) {
        color: white;
    }

    .headBg {
        margin-top: -68px;
        z-index: -1;
        width: 100%;
        height: 218px;
        position: fixed;

    }
    .content {
        height: calc(100% - 68px);
        width: 100%;
        margin-top: 68px;
        overflow: hidden;
        // background: #F5F7FA;
        overflow-y: scroll;
        box-sizing: border-box;
        box-sizing: border-box;
        .userInfo {
            display: flex;
            margin-top: 17px;
            padding-left: 13px;
            align-items: center;
            justify-content: space-between;
            .userInfoTop {
                display: flex;
                align-items: center;
                img {
                    width: 54px;
                    height: 54px;
                }
                .userName {
                    padding-left: 10px;
                    text-align: left;
                    font-size: 14px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 250;
                    color: #FFFFFF;
                    line-height: 24px;
                }
            }
            .userInfoBottom {
                z-index: 333;
                width: 90px;
                height: 26px;
                display: flex;
                opacity: .9;
                color: #FFFFFF;
                align-items: center;
                justify-content: center;
                font-size: 13px!important;
                border: 1px solid #FFFFFF;
                background: rgba(0,75,131,.3);
                border-radius: 14px 0px 0px 14px;
            }
        }

        .taskStatistics {
            margin: 10px;
            margin-top: 30px;
            padding: 12px;
            border-radius: 8px;
            background: white;
            text-align: left;
            box-shadow: 0px 4px 8px 0px rgba(4, 76, 148, 0.06);

            .taskText {
                font-size: 14px;
                font-weight: 400;
                color: #222222;
            }

            .completed {
                padding: 13px;
                margin-top: 8px;
                background: #F6F9FD;
                border-radius: 6px;
                font-size: 11px;
                img {
                    width: 20px;
                    height: 20px;
                }
                div {
                    display: flex;
                    margin-top: 3px;
                    align-items: center;
                    justify-content: center;
                }
                .completedText {
                    padding-top: 5px;
                    padding-bottom: 5px;
                    text-indent: 11px;
                    color: rgba(34, 34, 34, 0.76);
                    line-height: 16px;
                }

            }
        }

        .customerList {
            margin: 10px;
            padding: 20px;
            height: 313px;
            display: none;
            margin-top: 14px;
            text-align: left;
            border-radius: 8px;
            background: white;
            box-shadow: 0px 4px 8px 0px rgba(4, 76, 148, 0.06);
            form {
                width: 99%;
            }
            .customerc {
                height: 210px;
                margin-top: 7px;
            }
            .allCustomersText {
                font-size: 14px;
                font-weight: 400;
                color: #222222;
            }

            .search {
                margin-top: 12px;
                height: 32px;
                background: #FFFFFF;
                border-radius: 6px;
                border: 1px solid rgba(34, 34, 34, 0.3);
                width:70vw;
                :deep(.van-search__content) {
                    background: none;
                    padding: 0;
                }

                :deep(.van-icon-search) {
                    content: "\e710";
                    color: rgba(34, 34, 34, 0.3);
                }
            }
            .searchDiv {
                width: 47px;
                height: 32px;
                font-size: 14px;
                color: #F5F7FA;
                margin-top: 12px;
                margin-left: 10px;
                line-height: 32px;
                border-radius: 7px;
                text-align: center;
                background: #198AFA;
            }
            .vanList {
                padding-top: 8px;
                height: 100%;
                width: 100%;
                overflow-y: auto;
                text-align: left;

                // overflow-y: hidden;
                :deep(.van-cell) {
                    //去掉下划线（cell分割线）
                    position: static;
                    height: 40px;
                    padding: 0;
                    margin-top: 2px;

                }

                :deep(.van-cell__value) {
                    text-align: left;
                }

                .cellView {
                    border-radius: 5px;
                    background-color: #FAFAFA;
                    height: 34px;
                    // display: flex; //水平排列布局
                    padding-top: 5px;
                    padding-bottom: 5px;
                    font-size: 13px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 200;
                    color: #222222;
                    line-height: 20px;
                    .verticalBar {
                        padding-left: 0px;
                        img {
                            top: 4px;
                            width: 19px;
                            height: 19px;
                            margin-left: 3px;
                            position: relative;
                        }
                    }

                    .customerName {
                        height: 30px;
                        overflow: hidden;
                        line-height: 30px;
                        padding-left: 10px;
                        text-overflow:ellipsis;//文本溢出显示省略号
                        white-space:nowrap;//文本不会换行
                    }

                    .inviteAgain {
                        text-align: right;
                    }

                    .rightArrow {
                        text-align: right;
                        padding-top: 2px;
                    }
                }

            }
        }

        .customerProject {
            // width: 351px;
            width: 93%;
            padding: 10px;
            text-align: left;
            min-height: 270px;
            border-radius: 13px;
            background: #FFFFFF;
            // margin: 17px 0 0 13px;
            margin: 0 auto;
            margin-top: 17px;
            .projectTop {
                font-size: 17px;
                color: #222222;
                font-weight: bold;
            }
            .project {
                background: #FAFAFA;
                .projectList {
                    height: 37px;
                    display: flex;
                    padding: 0 10px;
                    font-size: 13px;
                    margin-top: 13px;
                    font-weight: bold;
                    border-radius: 13px;
                    align-items: center;
                    justify-content: space-between;
                    .projectListDv {
                        display: flex;
                        align-items: center;
                        img {
                            width: 18px;
                            height: 18px;
                        }
                        div {
                            margin-left: 10px;
                        }
                    }
                    .projectListMg {
                        width: 23px;
                        height: 23px;
                    }
                    .projectListMg1 {
                        width: 23px;
                        height: 23px;
                        transform: rotate(270deg);
                    }
                }
                .projectBtoom {
                    display: flex;
                    padding: 0 10px 10px 13px;
                    font-size: 13px;
                    align-items: center;
                    justify-content: space-between;
                }
            }
        }

        .primaryButton {
            width: 100%;
            display: flex;
            margin-top: 18px;
            margin-bottom: 50px;
            justify-content: center;
            .primaryButtont {
                width: 150px;
                height: 45px;
                // display: flex;
                position: relative;
                font-size: 14px;
                border-radius: 18px;
                align-items: center;
                justify-content: center;
                border: 1px solid #198AFA;
                background: rgba(25,138,250,0.05);
                box-shadow: 0px 1 1px 0px rgba(0,128,255,0.1);
                img {
                    position: absolute;
                    top: 2px;
                    left: 25px;
                    width: 17px;
                    height: 17px;
                }
                div {
                    margin-left: 3px;
                    height: 50px;
                    .tels{
                      margin-left: 20px;
                    }
                    // span{
                    //   margin-left: -15px;
                    // }
                }
            }
        }

        .newUser {
            // width: 351px;
            width: 93%;
            height: 37px;
            display: flex;
            color: #FAFAFA;
            margin: 0 auto;
            margin-top: 17px;
            // margin-left: 13px;
            border-radius: 10px;
            align-items: center;
            justify-content: center;
            background: linear-gradient(to bottom, #529EEC, #53A4F5);
        }
    }
}
:deep(.van-nav-bar__content){
  background-color:rgb(50, 149, 249);
  height: 48px;
}
.btn1{
  text-align: center;
  margin-left: 100px;
  margin-top: 20px;
  display: block;
  background: transparent;
  width: 100px;
  height: 40px;
  border: 1px solid rgb(251, 250, 250);
  border-radius: 20px;
}
.btn2{
  text-align: center;
  margin-left: 10px;
  margin-top: 20px;
  display: inline-block;
  background: transparent;
  width: 100px;
  height: 40px;
  border: 1px solid rgb(251, 250, 250);
  border-radius: 20px;
}
.btn3{
  text-align: center;
  margin-left: 90px;
  margin-top: 20px;
  display: inline-block;
  background: transparent;
  width: 100px;
  height: 40px;
  border: 1px solid rgb(251, 250, 250);
  border-radius: 20px;
}
.tops{
    width: 100%;
    height: 70px;
    display: flex;
    font-size: 15px;
    color: #F5F7FA;
    align-items: center;
    justify-content: center;
}
</style>



<!-- 
    头像	  仅展示	  图片			    默认头像，不可修改
    姓名	  仅展示	  文本			    从业人员姓名
    机构名称   仅展示	   文本			     从业人员所属机构名称
    已完成	  仅展示	   热区			    点击已完成区域，跳转到任务统计页面-已完成列表页面
    进行中	  仅展示	   热区			    点击进行中区域，跳转到任务统计页面-进行中列表页面
    失败	  仅展示	  热区			    点击失败区域，跳转到任务统计页面-失败列表页面
    姓名查询   输入	      文本框			 精确查询
    客户姓名   仅展示	   热区			     点击客户姓名区域，跳转到客户详情页面
    再次邀请   仅展示	   热区			     点击再次邀请区域，跳转到再次邀请页面
    添加客户   按钮		   点击添加客户按钮，  跳转到添加客户页面

    1、按已完成、进行中、失败三种维度统计该从业人员发起的所有检视任务。
    检视任务的所有状态包括：已创建、已查看告知页、已授权认证、已确认保单范围、生成报告中、已生成报告、未查看告知页、未授权认证、未选择保单范围、无有效保单、报告生成失败、终止。
    其中已完成维度包括：已生成报告状态的任务；

    进行中维度包括：已创建、已查看告知页、已授权认证、已确认保单范围、生成报告中状态的任务。

    失败维度包括：未查看告知页、未授权认证、未选择保单范围、无有效保单、报告生成失败、终止状态的任务。

    失败维度中的未查看告知页、未授权认证、未选择保单范围三种状态是指，在邀请二维码/链接超过7天有效期后，任务还停留在以上三种状态，则计为任务失败。
    
    已生成：后端计算引擎报告生成成功的任务状态。

    报告生成失败：后端计算引擎报告生成部分成功和报告生成失败的任务状态。
    终止状态是指在后台进行终止操作的任务状态 。
     
    全部客户
    1、客户名称列表按客户被创建检视任务的时间倒序排列。
    2、客户列表默认展示10条数，上滑加载10条数据。
-->
